<template>
	<view class="main-page" style="padding-bottom: 60rpx;">
		<view class="single-box">
			<view class="row-container-row-between width-100p">
				<view class="row-container">
					<text class="font-f23030-32 font-weight-600" >*</text>
					<text class="font-333-32 font-weight-600">第一步：填写订单号</text>
				</view>
				<view class="row-container">
					<text class="font-999-26" @click="gotoCheckOrderNo">如何查看订单号</text>
					<image class="wh-16" src="../../static/ic_arrow_right_grey.png"></image>
				</view>
			</view>
			<input 
				class="input-container"
				placeholder-class="font-999-32"
				placeholder="请输入您的订单号"
				maxlength="30"
				@input="handleInputThreeOrderNo"
			/>
		</view>
		
		<!-- 上传订单号截图 -->
		<view class="single-box">
			<view class="row-container-row-between">
				<view class="row-container">
					<text class="font-f23030-32 font-weight-600" >*</text>
					<text class="font-333-32 font-weight-600">第二步：上传订单截图</text>
				</view>
				
				<view class="jump-box" @click="gotoMpOrderInfo" v-if="brandName == '美团' || brandName == '饿了么'">
					<image class="wh-24 mr-6" src="../../static/ic_screen_black.png"></image>
					<text class="font-333-26">快速截图</text>
				</view>
			</view>
			
			<view class="row-container">
				<view class="column-container-center">
					<view class="upload-img-main" @click="clickUploadImg(0)">
						<image class="show-img" :src="orderNoImg" v-if="orderNoImg"></image>
						<image class="remove-img" src="../../static/ic_remove_img.png" 
						v-if="orderNoImg"></image>
					
						<image class="wh-40" src="../../static/ic_add_black.png" v-if="!orderNoImg"></image>
						<text class="font-666-26 mt-18" style="text-align: center;"
						 v-if="!orderNoImg">点击上传截图</text>
					</view>
					<text class="font-333-26 font-weight-600 mt-16">店铺名称截图</text>
					<text class="check-example" @click="handleShowExampleImg(1)">查看示例</text>
				</view>
				
				<view class="column-container-center ml-30">
					<view class="upload-img-main" @click="clickUploadImg(2)">
						<image class="show-img" :src="approveImg" v-if="approveImg"></image>
						<image class="remove-img" src="../../static/ic_remove_img.png" 
						v-if="approveImg"></image>
					
						<image class="wh-40" src="../../static/ic_add_black.png" v-if="!approveImg"></image>
						<text class="font-666-26 mt-18" v-if="!approveImg">点击上传截图</text>
					</view>
					<text class="font-333-26 font-weight-600 mt-16">订单号截图</text>
					<text class="check-example" @click="handleShowExampleImg(2)">查看示例</text>
				</view>
				
			</view>
		</view>
		
		<!-- 上传评价截图 -->
		<view class="single-box" v-if="checkComment == 0">
			<view class="row-container-row-between">
				<view class="row-container">
					<text class="font-f23030-32 font-weight-600" >*</text>
					<text class="font-333-32 font-weight-600">第三步：上传评价截图</text>
				</view>
				<view class="jump-box" @click="gotoMpEvaluate" v-if="brandName == '美团' || brandName == '饿了么'">
					<image class="wh-24 mr-6" src="../../static/ic_screen_black.png"></image>
					<text class="font-333-26">快速截图</text>
				</view>
			</view>
			<view class="column-container-center" style="width: 236rpx;">
				<view class="upload-img-main" @click="clickUploadImg(1)">
					<image class="show-img" :src="orderJudgeImg" v-if="orderJudgeImg"></image>
					<image class="remove-img" src="../../static/ic_remove_img.png" 
					v-if="orderJudgeImg"></image>
				
					<image class="wh-40" src="../../static/ic_add_black.png" v-if="!orderJudgeImg"></image>
					<text class="font-666-26 mt-18" style="text-align: center;"
					 v-if="!orderJudgeImg">点击上传截图</text>
				</view>
				<text class="font-333-26 font-weight-600 mt-16">评价截图</text>
				<text class="check-example" @click="handleShowExampleImg(3)">查看示例</text>
			</view>
		</view>
		
		<!-- 提示 -->
		<view class="single-box">
			<view class="row-container">
				<image class="wh-20 mr-8" src="../../static/ic_warn.png"></image>
				<text class="font-ff621f-28 font-weight-600">温馨提示：请按步骤操作</text>
			</view>
			<text class="font-ff621f-28 mt-10" 
			style="line-height: 40rpx;">上传其他无关图片、上传P图、恶意上传非本店订单，账户将自动判定为恶意用户，并拉黑。</text>
		</view>
		
		<view class="row-container-center width-100p mt-60">
			<text class="font-333-30">上传即同意</text>
			<text class="font-333-30 font-weight-600" style="text-decoration: underline;" 
			@click="gotoPrivacy">最星城用户隐私协议《法律说明》</text>
		</view>
		
		<view class="row-container-center width-100p" style="margin-top: 33rpx;">
			<text class="font-666-28">若有问题，可联系客服</text>
			<view class="contact-service" @click="handleOpenCustomService">
				<image class="service-icon" src="../../static/ic_customer_service.png"></image>
				<text class="font-333-22">点我联系客服</text>
			</view>
		</view>
		
		<text class="btn-confirm" @click="handleCommit">提交截图</text>
		
		<!-- 上传失败的提示弹窗 -->
		<view v-if="showUploadFailWindow" class="update-info-window">
			<view class="update-info-inner-window">
				<image class="update-info-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<image class="failed-ic" src="../../static/ic_buy_failed.png"></image>
				<text class="font-333-36 font-weight-600 mt-20">很抱歉，上传失败！</text>
				<text class="hint-content" style="margin-left: 0rpx;margin-right: 0rpx;">{{uploadFailedMsg}}</text>
				<text class="confirm" @click="showUploadFailWindow = false">我知道了</text>
				<view class="rule-hint-container">
					<text class="font-ff621f-28 font-weight-600" style="text-align: center;" @click="checkScreenShotIntro">上传失败看这里</text>
				</view>
			</view>
		</view>
		
		<!-- 移除截图弹窗 -->
		<view class="update-info-window" v-if="showRemoveWindow">
			<view class="remove-window">
				<text class="font-333-32 font-weight-600">确定删除该截图吗？</text>
				<view class="remove-divider"></view>
				<view class="row-container width-100p">
					<text class="remove-btn" @click="showRemoveWindow = false">我再想想</text>
					<text class="remove-btn font-weight-600" style="background: #FFD100;"
					@click="handleRemoveImg">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 示例图片弹窗 -->
		<view class="update-info-window" v-if="showExampleImgWindow">
			<image class="example-img" mode="widthFix" :src="exampleImgUrl"></image>
			<image class="wh-76" src="../../static/ic_close_white.png" @click="showExampleImgWindow = false"></image>
		</view>
		
		
	</view>
</template>

<script>
	import config from '../../utils/config'
	export default {
		data() {
			return {
				orderNo:'' , //平台的订单号
				orderId:'' , // 平台的订单id
				checkComment:0, // 为1的话只显示订单号截图
				
				checkApprove:0 , // 是否需要点赞
				checkCollect:0 , //是否需要收藏店铺
				
				threeOrderNo :'' ,// 填写的订单编号
				orderAmount:"" , //订单金额
				mobile:'' , // 联系电话
				remark:"" , //备注
				
				orderNoImg:"" , // 订单号截图
				approveImg:'' , // 第二个订单号截图
				orderJudgeImg:"" , //订单评价截图
				
				isModify:0 , // 是否为修改
				brandName:'' ,// 品牌名称 饿了么或者美团
				
				
				screenshotIntro:"" , //截图说明的链接
				
				showUploadFailWindow:false , // 上传失败弹窗
				uploadFailedMsg:'' , //上传失败原因
				
				clickRemoveType:-1 , // 点击删除图片的类型  0删除订单号截图  1删除订单评价截图
				showRemoveWindow:false , // 移除图片确认弹窗

				orderImg1FailedMsg:[], // 第一张订单截图检测失败的原因
				orderImg2FailedMsg:[] , //第二张订单截图检测失败的原因
				
				showExampleImgWindow:false , //显示示例图片弹窗
				exampleImgUrl:'' , //示例图片
				
				exampleOrderImg1:'' , // 订单图片1示例图
				exampleOrderImg2:'' , // 订单图片2示例图
				exampleJudgeImg:'' , // 评价图片示例图
			}
		},
		
		onLoad(options) {
			this.orderNo = options.orderNo
			this.checkApprove = options.checkApprove
			this.checkCollect = options.checkCollect
			this.checkComment = options.checkComment
			this.brandName = options.brandName
			this.orderId = options.orderId
			
			console.log('orderId----' , this.orderId)
			
			this.loadExampleImgs()
			
			if (options.screenshotIntro){
				this.screenshotIntro = options.screenshotIntro
			}

			if (options.isModify){
				this.isModify = options.isModify
				console.log('isModify---' , this.isModify)
				this.loadDetail()
			}
		},
		
		methods: {
			handleInputThreeOrderNo(e){
				this.threeOrderNo = e.detail.value
			},
			
			loadExampleImgs(){
				let that = this
				this.http({
					url:'/common/brandInfo',
					method:'POST',
					data:{
						brandName : that.brandName
					},
					success(res){
						if (res.code == 200 && res.data){
							that.exampleOrderImg1 = res.data.oneImgUrl
							that.exampleOrderImg2 = res.data.twoImgUrl
							that.exampleJudgeImg = res.data.threeImgUrl
						}
					},
					failed(e){
					}
				})
			},
			
			loadDetail(){
				let that = this
				this.http({
					url:'/user/order/orderDetail',
					method:'POST',
					data:{
						orderNo : that.orderNo
					},
					success(res){
						if (res.code == 200){
							that.threeOrderNo = res.data.threeOrderNo
							that.orderAmount = res.data.threeOrderPrice
							that.mobile = res.data.mobile
							
							that.orderNoImg = res.data.orderNoImg
							that.approveImg = res.data.approveImg
							that.orderJudgeImg = res.data.orderAppraiseImg
							that.remark = res.data.remarks
						}
					},
					failed(e){
					}
				})
			},
			
			//跳转美团外卖或者饿了么小程序 订单详情
			gotoMpOrderInfo(){
				if (!this.threeOrderNo) {
					uni.showToast({
						title:'请输入您的订单号',
						icon:'none'
					})
					return
				}
				
				let that = this
				
				let threeOrderNoStr = this.threeOrderNo.replaceAll(" " , "")
				
				if (this.brandName == "饿了么"){
					uni.navigateToMiniProgram({
						appId:'wxece3a9a4c82f58c9',
						path:'ele-estore/ele-order-detail-tb/ele-order-detail-tb?eosOrderId=' + threeOrderNoStr
						 +'&orderId=' + threeOrderNoStr,
						 success() {
						 }
					})
				} else if (this.brandName == "美团"){
					uni.navigateToMiniProgram({
						appId:'wx2c348cf579062e56',
						path:'packages/trade/pages/order-info/index?patch_order_role=0&view_id='
						 + threeOrderNoStr + '&biz_type=1&business_type=&order_type=0',
						success() {
						} 
					
					})
				}
			},
			
			//跳转美团外卖或者饿了么小程序我的评价
			gotoMpEvaluate(){
				let that = this
				if (this.brandName == "饿了么"){
					uni.navigateToMiniProgram({
						appId:'wxece3a9a4c82f58c9',
						path:'ele-evaluate-order/pages/ele-evaluate-center/ele-evaluate-center?startTime=' + Date.now(),
						success() {
						}
					})
				} else if (this.brandName == "美团"){
					uni.navigateToMiniProgram({
						appId:'wx2c348cf579062e56',
						path:'sub_inner_pages/evaluate-list/evaluate-list',
						success() {
						}
					})
				}
			},
			
			gotoPrivacy(){
				uni.navigateTo({
					url:'/pages/mine/privacy'
				})
			},
			
			//点击上传截图  或者是删除截图  type 0 订单号截图  1订单评价截图 
			clickUploadImg(type){
				if (type == 0 && this.orderNoImg){
					this.clickRemoveType = 0
					this.showRemoveWindow = true
					return
				} else if (type == 1 && this.orderJudgeImg){
					this.clickRemoveType = 1
					this.showRemoveWindow = true
					return
				} else if (type == 2 && this.approveImg){
					this.clickRemoveType = 2
					this.showRemoveWindow = true
					return
				}
				
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType:['compressed'],
					success(res) {
						uni.showLoading({
							title:'文件上传中...'
						})
						
						res.tempFilePaths.forEach(tempFilsItem => {
							uni.uploadFile({
								url:config.url+"/upload/file",
								filePath: tempFilsItem,
								name : 'file',
								header:{"Authorization":that.cookie.get("jx_token")},
								success: (uploadFileRes) => {
									uni.hideLoading()
									
									let imgUrl = JSON.parse((uploadFileRes.data)).data
									if (type == 0){
										that.orderNoImg = imgUrl
									} else if (type == 1){
										that.orderJudgeImg = imgUrl
									} else if (type == 2){
										that.approveImg = imgUrl
									}
								},
								fail:()=>{
									uni.hideLoading()
								}
							})
						})
					},
					fail(e) {
						console.log('fail---image----' , e)
					}
				})
			},
			
			//移除图片
			handleRemoveImg(){
				if (this.clickRemoveType == 0){
					this.orderNoImg = ""
				} else if (this.clickRemoveType == 1){
					this.orderJudgeImg = ""
				} else if (this.clickRemoveType == 2){
					this.approveImg = ""
				}
				this.showRemoveWindow = false
				this.clickRemoveType = -1
			},
			
			handleCommit(){
				if (!this.orderNo) {
					console.log("no--orderNo----")
					return
				}
				
				if (!this.threeOrderNo){
					uni.showToast({
						title:'请输入您的订单号',
						icon:'none'
					})
					return
				}
				
				if (!this.orderNoImg){
					uni.showToast({
						title:'请上传您的订单号截图',
						icon:'none'
					})
					return
				}
				
				
				if (this.checkComment == 0 && !this.orderJudgeImg){
					uni.showToast({
						title:'请上传您的订单评价截图',
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:'/zxc/user/order/zxcSubmitResult',
					method:'POST',
					data:{
						orderAppraiseImg : this.orderJudgeImg,
						orderNo : this.orderNo,
						orderNoImg : this.orderNoImg,
						approveImg:this.approveImg,
						remarks : this.remark,
						threeOrderNo : this.threeOrderNo,
						errorMsg:this.uploadFailedMsg
					},
					success(res){
						if (res.code == 200){
							uni.$emit("refreshOrderDetail")
							uni.$emit("refreshOrderList")
							uni.navigateBack({delta:1})
						} else{
							that.uploadFailedMsg = res.msg
							that.showUploadFailWindow = true
						}
					},
					failed(e){
					}
				})
			},
			
			//打开客服聊天
			handleOpenCustomService(){
				uni.openCustomerServiceChat({
					corpId:this.config.corpId ,
					extInfo: {url: this.cookie.get('customServiceUrl')},
					success(res){
						
					},
					fail(e){
						console.log('eeeeeeee-----' + JSON.stringify(e))
					}
				})
			},
			
			//跳转查看截图说明
			checkScreenShotIntro(){
				if (this.screenshotIntro){
					uni.navigateTo({
						url:'/pages/index/web?webUrl=' + encodeURIComponent(this.screenshotIntro)
						// url:'/pages/index/web?webUrl=https://mp.weixin.qq.com/s/sNFG3fkr18DeCHUDYPdMlQ'
					})
				}
			},
			
			//查看订单号
			gotoCheckOrderNo(){
				if (this.config.checkOrderNoUrl){
					uni.navigateTo({
						url:'/pages/index/web?webUrl=' + encodeURIComponent(this.config.checkOrderNoUrl)
					})
				}
			},
			
			//点击显示示例图片  1订单图片1  2订单图片2  3评价图片
			handleShowExampleImg(type){
				if (type == 1) {
					this.exampleImgUrl = this.exampleOrderImg1
				} else if (type == 2){
					this.exampleImgUrl = this.exampleOrderImg2
				} else if (type == 3){
					this.exampleImgUrl = this.exampleJudgeImg
				}
				if (this.exampleImgUrl){
					this.showExampleImgWindow = true
				}
			}
			
			
			
			
		}
	}
</script>

<style lang="scss">
	.single-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 120rpx);
		background: white;
		border-radius: 16rpx;
		margin: 20rpx 30rpx 0rpx 30rpx;
		padding: 30rpx;
		
		.jump-box{
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background: #F5F5F5;
			border-radius: 30rpx;
			border: 1px solid #E0E0E0
		}
		
		.upload-img-main{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 236rpx;
			height: 236rpx;
			margin-top: 30rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			border: 2rpx solid #E0E0E0;
			position: relative;
			
			.remove-img{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 110;
			}
			
			.show-img{
				width: 236rpx;
				height: 236rpx;
				position: absolute;
				z-index: 100;
			}
		}
		
		.check-example{
			padding: 8rpx 28rpx;
			background: #FFD100;
			border-radius: 30rpx;
			margin-top: 30rpx;
			color: #333333;
			font-size: 24rpx;
			font-weight: 600;
		}
	}
	
	.input-container{
		width: calc(100% - 48rpx);
		height: 87rpx;
		margin-top: 18rpx;
		background: #F5F5F5;
		border: 2rpx solid #E0E0E0;
		border-radius: 10rpx;
		padding: 0rpx 24rpx;
		line-height: 87rpx;
		color: #333333;
		font-size: 32rpx;
	}
	
	.upload-warn-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 96rpx);
		background: rgba(255, 209, 0, 0.2);
		margin: 16rpx 30rpx 30rpx 30rpx;
		padding: 9rpx 18rpx;
		
		.warn-ic{
			width: 20rpx;
			height: 20rpx;
			margin-right: 8rpx;
		}
	}
	
	.wide-divider{
		width: 100%;
		height: 20rpx;
		margin-top: 40rpx;
		background-color: #F5F5F5;
	}
	
	.contact-service{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5rpx 11rpx;
		background: #FFC01F;
		border-radius: 6rpx;
		margin-left: 14rpx;
		position: relative;
		
		.service-btn{
			width: 100%;
			height: 40rpx;
			background: transparent;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.service-icon{
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
		}
	}
	
	.btn-confirm{
		width: calc(100% - 60rpx);
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		margin-top: 60rpx;
		background: #FFD100;
		border-radius: 10rpx;
		color: #333333;
		font-size: 36rpx;
		font-weight: 600;
		margin-left: 30rpx;
	}
	
	.update-info-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 150;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.update-info-inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 236rpx);
			padding: 0 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.update-info-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.failed-ic{
				width: 108rpx;
				height: 108rpx;
				margin-top: 50rpx;
			}
			
			.failed-ic-large{
				width: 132rpx;
				height: 132rpx;
				margin-top: 44rpx;
			}
			
			.hint-content{
				color: #666666;
				font-size: 28rpx;
				margin-left: 70rpx;
				margin-right: 70rpx;
				text-align: center;
				margin-top: 10rpx;
				margin-bottom: 40rpx;
			}
			
			.img-msg-box{
				background: #FF621F1A;
				margin-top: 30rpx;
				margin-bottom: 32rpx;
				width: calc(100% - 40rpx);
				border-radius: 10rpx;
				padding: 20rpx;
				color: #FF621F;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			
			.content-str{
				text-align: center;
				margin-left: 36rpx;
				margin-right: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 40rpx;
				color: #FF621F;
				font-size: 28rpx;
			}
			
			.cancel-btn{
				width: 100%;
				height: 88rpx;
				background: #F5F5F5;
				border: 2rpx solid #E0E0E0;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 32rpx;
			}
			
			.ok-btn{
				width: 246rpx;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				text-align: center;
				line-height: 88rpx;
				margin-left: 15rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 600;
			}
			
			.confirm{
				width: 100%;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				line-height: 88rpx;
				margin-bottom: 23rpx;
			}
			
			.rule-hint-container{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: calc(100% - 44rpx);
				padding: 22rpx;
				background:  #F5F5F5;
				border-radius: 10rpx;
				margin-bottom: 44rpx;
			}
			
		}
		
		.remove-window{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(100% - 148rpx);
			background: white;
			border-radius: 36rpx;
			padding-top: 44rpx;
			
			.remove-divider{
				width: 100%;
				height: 1rpx;
				background: #EEEEEE;
				margin-top: 44rpx;
			}
			
			.remove-btn{
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				color: #333333;
				font-size: 32rpx;
				border-bottom-right-radius: 36rpx;
			}
		}
		
		.example-img-window{
			display: flex;
			flex-direction: column;
			position: relative;
			width: 602rpx;
			background: white;
			border-radius: 30rpx;
		}
		
		.example-img{
			width: 602rpx;
			border-radius: 30rpx;
			margin-bottom: 40rpx;
		}
		
	}
	
	button::after {
		border: none;//去除边框
	}
	
</style>
